import BarCharts from "@/pages/Home/components/BarCharts";
import './index.scss'
import {Breadcrumb, Card} from "antd";
import {DiffOutlined, EditOutlined, FireOutlined, UserOutlined} from "@ant-design/icons";
import React from "react";

const Home = () => {
    const nameList = ["推荐", "html", "开发者资讯", "c++", "css", "数据库", "区块链", "go", "产品", "后端", "linux", "人工智能", "php", "javascript", "架构", "前端", "python", "java", "算法", "面试", "科技动态", "js", "设计", "数码产品", "软件测试"]
    const list = [120, 200, 150, 80, 70, 110, 130, 200, 150, 80, 70, 110, 130, 200, 150, 80, 70, 110, 130, 200, 150, 80, 70, 110, 130]
    return (<div>
        <Card
            style={{width: '100%', height: '80vh'}}
            title={<Breadcrumb
                items={[{
                    href: '/article', title: (<>
                        <DiffOutlined/>
                        <span>文章管理</span>
                    </>),
                }, {
                    href: '/publish', title: (<>
                        <EditOutlined/>
                        <span>创建文章</span>
                    </>),
                }, {
                    href: '/hot', title: (<>
                        <FireOutlined/>
                        <span>时讯热点</span>
                    </>),
                }, {
                    href: '/user', title: (<>
                        <UserOutlined/>
                        <span>个人中心</span>
                    </>),
                }]}/>}>

            <div className={"home"}>
                <BarCharts xData={['vue', 'react', 'angular', 'jquery', 'bootstrap', 'node', 'mongodb']}
                           yData={[120, 200, 150, 80, 70, 110, 130]}
                           title={'2024年前端热门技术栈'}
                           onWidth={"600px"}
                           onHeight={"400px"}
                           barWidth={"50%"}
                           onColor={"#ceea48"}/>
                <BarCharts
                    xData={['javascript', 'java', 'python', 'c++', 'c', 'php', 'go']}
                    yData={[200, 360, 196, 80, 210, 110, 230]}
                    title={'2024年热门前后端语言'}
                    onWidth={"600px"}
                    onHeight={"400px"}
                    barWidth={"50%"}
                    onColor={"#1883a9"}/>
            </div>
        </Card>
        <Card
            style={{width: '100%', height: '80vh', marginTop: "10px"}}>
            <div className={"home"}>
                <BarCharts title={'极客园各频道文章统计/篇数'} onWidth={"1200px"} onHeight={"500px"} xData={nameList}
                           yData={list} barWidth={"50%"}
                           onColor={"#095976"}/>
            </div>
        </Card>
    </div>)
}
export default Home